<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body,ul,li{margin:0;padding:0;}
        li{list-style:none}
        .navBox{height:50px;background:#efefef;}
        .navBox ul{display: flex;justify-content: space-around;align-items: center;line-height: 50px;}
        .navBox ul li{padding: 0 10px;}
        .navBox ul a{text-decoration: none;}
        .navBox ul li:hover{background: red;}
        .navBox ul li:hover a{color:#fff;}

    </style>
</head>
<body>
    
</body>
<script>
    // 数据的打包原则：
    //     同类数据打包成数组
    //         一个班级所有同学
    //         都是姓名：names = []
    //         都是年龄：ages = []
    //         都是手机号：tels = []
    //     非同类但在描述一个个体的数据打包成对象
    //         一个同学的所有信息：stu = {name:"",age:18,tel:0}

    // 1. 获取数据
        // 从后端获取到导航数据
        // 根据当前页面现有结构内容抽象成数据

    
    // 多个导航数据，打包成数组
    // 一个导航由名字和链接组成，打包成对象
    var navs = [{
        title:"百度",
        href:"https://www.baidu.com"
    },{
        title:"腾讯",
        href:"https://www.qq.com"
    },{
        title:"网易",
        href:"https://www.163.com"
    },{
        title:"淘宝",
        href:"https://www.taobao.com"
    },{
        title:"京东",
        href:"https://www.jd.com"
    },{
        title:"小米",
        href:"https://www.mi.com"
    },{
        title:"阿里云",
        href:"https://www.aliyun.com"
    }];

    // 2. 准备对应页面结构的字符串
    // var str = '<div class="navBox">'+
    //                 '<ul>'+
    //                     '<li>' +
    //                         '<a href=""></a>' +
    //                     '</li>' + 
    //                 '</ul>' + 
    //             '</div>'

    // 3. 解析数据，拼接到字符

    // 需要navs数组中的每个对象的title和href

    var li = "";
    for(var i=0;i<navs.length;i++){
        li += '<li>' +
            '<a href="'+ navs[i].href +'">'+ navs[i].title +'</a>' +
        '</li>';
    }

    var str = '<div class="navBox">'+
                    '<ul>' + li + '</ul>' + 
                '</div>';


    document.write(str);

</script>
</html>